<template>
  <el-select v-if="lst.length>0" v-model="selectId" placeholder="请选择" @change="change">
    <el-option
      v-for="item in lst"
      :key="item.id"
      :label="item.bankName"
      :value="item.id"
    >
      <span style="float: left">{{ item.bankName }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.accountName }}</span>
    </el-option>
  </el-select>
</template>
<script>
export default {
  name: 'SupplierBank',
  props: {
    value: {
      type: String,
      default: ''
    },
    supplierId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      lst: [],
      selectId: '',
      selectItem: null
    }
  },
  watch: {
    'supplierId': {
      handler(n, o) {
        console.log(n + '---' + o)
        this.load()
        this.change(this.value)
      }
    }
  },
  mounted() {
    this.selectId = this.value
    this.load()
  },
  methods: {
    load() {
      const that = this
      const url = that.$http.conf.api.get('wms').url + '/api/sup/bank-info/map/' + that.supplierId
      that.$http.get(url, {}).then((res) => {
        if (res.code !== 200) {
          that.$message.error(res.message)
          return
        }
        that.lst = res.data
        if (!String.isNullOrEmpty(that.selectId)) {
          that.change(that.selectId)
        }
      })
    },
    change(current) {
      this.selectId = current
      this.selectItem = this.lst.filter(o => o.id === this.selectId)[0]
      this.$emit('input', this.selectId)
      this.$emit('change', this.selectItem)
    }
  }
}
</script>
